<template>
  <div class="comment-pop">
    <div class="click-replay">
      <div class="upload">
        <ul>
          <li v-show="item" class="images" v-for="(item, index) in imagesLrz" :key="index" :style="'backgroundImage:url('+item+')'">
            <span class="remove" @click="delImage(index)">x</span>
          </li>
          <li v-show="showLoading">
            <img class="loading" src="../../assets/images/loading.gif" alt="">
          </li>
          <li class="input-container" v-show="uploadShow">
            <input type="file" @change="onFileChange" accept="image/gif,image/jpeg,image/jpg,image/png" class="file-input" ref="input">
          </li>
        </ul>
      </div>
      <div class="input">
        <input v-focus="true" class="text" type="text" placeholder="说点什么吧..." v-model="msgReply">
        <div style="display:inline-block" @click="sendReply">
          <x-button type="primary" mini>发送</x-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { XButton } from 'vux'
import lrz from 'lrz'
import bus from '../../common/js/commonVue'
import qs from 'qs'
export default {
  data () {
    return {
      imagesLrz: [],
      uploadShow: true,
      showLoading: false,
      msgReply: '',
      vid: -1,
      rid: -1,
      ty: -1,
      dsab: false
    }
  },
  created() {
    bus.$on('passId', (vid, rid, type) => {
      this.vid = vid
      this.rid = rid
      this.ty = type
    })
  },
  components: {
    XButton
  },
  methods: {
    sendReply () {
      if (!this.msgReply.trim().length || !this.msgReply) {
        alert('内容不能为空')
        return
      }
      const url = `https://ynwx.zgwyzxw.cn/index.php/home/comment/addcomment`
      const data = {
        content: this.msgReply,
        related_id: this.rid,
        comment_type: this.ty,
        id: this.vid,
        openid: 'oHVoI1R5bM0DJ-UC-wxJBvKNK13g',
        img: this.imagesLrz
      }
      this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
        if (res.data.code === 200) {
          this.$emit('passMethod')
          bus.$emit('passShowMask1', false)
          this.msgReply = ''
        } else {
        }
      })
    },
    onFileChange (e) {
      if (this.imagesLrz.length > 2) {
        alert('不能超过3张')
        return
      }
      let files = e.target.files || e.dataTransfer.files
      if (!files.length) return
      this.createImage(files)
    },
    createImage (file, e) {
      this.showLoading = true
      lrz(file[0], { quality: 0.4 })
        .then(rst => {
          let img = new Image()
          img.src = rst.base64
          this.imagesLrz.push(rst.base64)
          if (this.imagesLrz.length > 2) {
            this.uploadShow = false
          }
          this.showLoading = false
        })
        .always(function () {
          // 清空文件上传控件的值
          e.target.value = null
        })
    },
    delImage (index) {
      this.imagesLrz.splice(index, 1)
      this.uploadShow = true
      this.$refs.input.value = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-pop {
  .click-replay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000002;
    background-color: #f2f2f2;
    .upload {
      ul {
        width: 100%;
        display: flex;
        padding: 10px 10px;
        justify-content: flex-start;
      }
      .input-container {
        display: inline-block;
        background: url("../../assets/images/tianjiatupian@2x.png") no-repeat;
        width: 50px;
        height: 50px;
        background-size: 100% 100%;
        // text-align: center;
      }
      .file-input {
        display: inline-block;
        height: 50px;
        width: 50px;
        opacity: 0;
        font-size: 0;
      }
      .images {
        width: 50px;
        height: 50px;
        margin-right: 5px;
        position: relative;
        background-size: cover;
        .remove {
          width: 20px;
          height: 20px;
          background-color: red;
          line-height: 20px;
          color: #fff;
          text-align: center;
          border-radius: 50%;
          position: absolute;
          right: -2px;
          top: -2px;
        }
      }
    }
    .input {
      width: 100%;
      height: 40px;
      padding: 0 10px;
      .text {
        outline: none;
        width: 75%;
        height: 34px;
        border-radius: 5px;
        padding-left: 10px;
        border: 1px solid #f2f2f2;
      }
      .weui-btn_primary {
        background-color: #0078de;
      }
      .weui-btn_disabled.weui-btn_primary {
        background-color: #fff;
        color: #666;
      }
    }
  }
}
</style>
